<template>
  <div class="PersonAddRole">
    <!-- 返回 -->
    <div class="PersonAddRole_top">
      <div class="retu-btn" @click="$router.go(-1)">
        <img src="../../assets/images/ly/return.png" alt />
        <span>返回</span>
      </div>
    </div>
    <!-- 表单 -->
    <div class="PersonAddRole_form">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="personAddROleForm"
        class="personAddForm"
      >
        <el-form-item>
          <h2>基本信息</h2>
        </el-form-item>
        <el-form-item label="角色名称(必填):">
          <el-input v-model="personAddROleForm.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input v-model="personAddROleForm.desc" placeholder="请输入描述"></el-input>
        </el-form-item>
        <el-form-item>
          <h2>功能权限</h2>
        
          <div class="personTree">
            <span style="display:block;font-size:15px;">总后台端</span>
            <span
              style="display:block"
            >------------------------------------------------------------------</span>
              <el-input placeholder="请输入你要搜索的内容" suffix-icon="el-icon-search" v-model="input1"></el-input>
            <el-tree
              class="filter-tree"
              :data="data"
              show-checkbox
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
            ></el-tree>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      labelPosition: "top",
      personAddROleForm: {
        name: "",
        desc: ""
      },
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  }
};
</script>
<style lang="less" scoped>
.PersonAddRole {
  width: 95%;
  padding: 20px;
  border: 1px solid #eaedf3;
  h4 {
    font-family: "Microsoft Yahei";
  }
  .retu-btn {
    cursor: pointer;
    width: 120px;
    height: 35px;
    background: rgba(0, 119, 248, 1);
    border: 1px solid rgba(1, 101, 209, 1);
    opacity: 1;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    img {
      widows: 15px;
      height: 15px;
    }
    span {
      color: rgba(255, 255, 255, 1);
      margin-left: 13px;
    }
  }
  .PersonAddRole_form {
    .personAddForm {
      width: 500px;
      margin: 50px auto;
    }
    .personTree{
        width: 400px;
        border: 1px solid #EAEDF3;
        margin-top: 20px;
        padding: 10px;
    }
  }
}
</style>